<template>
	<view>
		<view class="wrap-viewBody">
			<view class="view-child" v-for="(item,index) in Vbody" :key="index">
				<view class="view-child-one">{{item.Vone}}</view>
				<view  class="view-child-two">{{item.Vtwo}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				Vbody:[
					{
						"Vone":"出境游",
						"Vtwo":"走遍全球"
					},
					{
						"Vone":"国内游",
						"Vtwo":"精选路线"
					},
					{
						"Vone":"周边游",
						"Vtwo":"暑假红包"
					},
					{
						"Vone":"精选购",
						"Vtwo":"免税预购"
					},
					{
						"Vone":"签证/签注",
						"Vtwo":"领券"
					},
					{
						"Vone":"会员",
						"Vtwo":"签到"
					},
					{
						"Vone":"每日福利",
						"Vtwo":"领里程"
					},
					{
						"Vone":"全部",
						"Vtwo":"更多推荐"
					}
				]
			}
		}
		
	}
</script>

<style lang="scss">
	.wrap-viewBody{
		display: flex;
		flex-wrap: wrap;
		margin: 0 12upx;
		border: 1px solid #e6e7e6;
		border-radius: 12upx;
		.view-child{
			flex: 24%;
			padding: 15upx 12upx;
			box-sizing: border-box;
			view{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.view-child-one{
				color: #333333;
				font-size: 30upx;
				font-weight: bold;
			}
			.view-child-two{
				color: #686868;
				font-size: 24upx;
			}
		}
		.view-child:nth-child(2){border-left:1px solid #e6e7e6 ; border-right:1px solid #e6e7e6 ;}
		.view-child:nth-child(3){border-right:1px solid #e6e7e6 ;}
		.view-child:nth-child(6){border-left:1px solid #e6e7e6 ; border-right:1px solid #e6e7e6 ;}
		.view-child:nth-child(7){border-right:1px solid #e6e7e6 ;}
		.view-child:nth-child(-n+4){border-bottom:1px solid #e6e7e6 ;}
	}
</style>
